<template>
  <div class="list" ref="list">
    <slot></slot>
  </div>
  <div v-show="finish" class="empty">
    <p>小子看见我,说明没内容了</p>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, onBeforeUnmount, ref } from 'vue'
const list = ref<HTMLDivElement>()
// 传入的值
const props = withDefaults(
  defineProps<{
    isLoading: boolean
    finish: boolean
  }>(),
  {
    isLoading: false,
    finish: true,
  }
)
// emit 触发 请求函数
const emits = defineEmits(['lazyHtppHandle'])
// 获取页面数据
const getList = () => {
  if (props.finish) return
  emits('lazyHtppHandle')
}
// 页面滚动事件
const windowScoll = () => {
  if (props.isLoading) return
  if (props.finish) return
  const bodyScrollTop: number =
    document.documentElement.scrollTop || document.body.scrollTop
  let allHeight: number = bodyScrollTop + window.innerHeight
  list.value &&
    (allHeight =
      list.value.offsetHeight + list.value.offsetTop - allHeight + 50)
  allHeight < 0 && getList()
}
// 添加移除页面滚动事件
window.addEventListener('scroll', windowScoll, {
  passive: true,
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', windowScoll)
})
</script>

<style lang="scss" scoped>
.empty {
  position: relative;
  width: 200px;
  height: 200px;
  background: url(@/assets/empty.svg) no-repeat center;
  margin: auto;
  transform: translateX(-50px);
  margin-top: 30px;

  p {
    position: absolute;
    right: -100px;
    top: -0px;
    width: 120px;
    padding: 10px 12px;
    background-color: #fff;
    border-radius: 30px;
    font-size: 12px;

    &::after {
      position: absolute;
      bottom: 3px;
      left: 4px;
      content: '';
      width: 10px;
      height: 10px;
      background: #fff;
    }
  }
}
</style>
